<template>
  <div style="display: flex; justify-content: flex-end; align-items: center; height: 100%">
    <el-button type="text" style="color: #333333; font-size: 18px" @click="logout">
      退出登录
    </el-button>
    <el-divider direction="vertical"></el-divider>
    <i class="el-icon-time" style="margin-right: 10px"></i>
    <span>{{ currentTime }}</span>
    <el-divider direction="vertical"></el-divider>
    <i class="el-icon-user" style="margin-right: 10px"></i>
    <span>{{ userName }}</span>
  </div>
</template>

<script>
export default {
  name: "r-header",
  data() {
    return {
      currentTime: new Date().toLocaleString()
    }
  },
  computed: {
    userName() {
      // 优先从store获取，其次从sessionStorage获取，最后用默认值
      return this.$store.state.userName || 
             sessionStorage.getItem('userName')
    }
  },
  created() {
    console.log('Store state:', this.$store.state); // 检查整个store状态
  console.log('SessionStorage:', {
    token: sessionStorage.getItem('token'),
    type: sessionStorage.getItem('type'),
    userId: sessionStorage.getItem('userId'),
    userName: sessionStorage.getItem('userName')
  });
    this.updateTime();
    setInterval(() => {
      this.currentTime = new Date().toLocaleString();
    }, 1000);
  },
  methods: {
    updateTime() {
      this.currentTime = new Date().toLocaleString();
    },
    logout() {
      this.$store.dispatch('logout');
      this.$router.push('/login');
    }
  }
}
</script>

<style scoped>
.el-button--text {
  color: #67C23A;
}
</style>